<template>
<div :class="['leo-left-area', {width75: showMinuWidth}, {sizeClass}]" :style="{width:(width <= 90 ? 60 : width) + 'px'}">
    <div class="leo-left-area-inner">
        <slot></slot>
    </div>
    <dx-xhandle @mouseDownAction="mouseDownAction" @mouseUpAction="mouseUpAction" @widthChange="widthChange"></dx-xhandle>
</div>
</template>

<script lang="ts">
import {
    Options,
    Vue
} from 'vue-class-component';

@Options({
    name: 'topBar',
    components: {
    }
})
export default class extends Vue {

    width: number = 280;
    sizeClass: string = '';
    showMinuWidth: boolean = false;

    mounted() {

    }

    widthChange(movement: number) {
        // console.log('movement == ' + movement + this.showMinuWidth);
        this.width += movement
        if (this.width <= 60 && !this.showMinuWidth) {
            this.width = 60
            this.showMinuWidth = true;
        }
        if (movement > 0) {
            this.showMinuWidth = false;
        }
        if (this.width >= 400) {
            this.width = 400
        }
    }

    mouseDownAction(event: MouseEvent) {
        this.$emit('mouseDownAction', event);
    }

    mouseUpAction(event: MouseEvent) {
        this.$emit('mouseUpAction', event);
    }

}
</script>

<style lang="scss" scoped>
.leo-left-area {
    display: flex;
    display: -webkit-flex;
    height: 100%;
    flex-flow: row;
    padding-top: 3px;
    flex-shrink: 0;

    .leo-left-area-inner {
        flex: 1;
        display: flex;
        flex-flow: column;
        width: 100%;
    }
}

.width75 {
    width: 60px !important;
}
</style>
